<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录-后台管理</title>
    <link rel="stylesheet" href="/themes/admin/lib/layui/css/layui.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <style>
        body{
            background:url('/themes/admin/images/login_bg.jpg') no-repeat;
            background-size:cover;
        }
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            position: relative;
            width: 300px;
            height: 40px;
            margin: 0 auto;
            margin-top: 10px;
            background-color: #e8e8e8;
            box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
        }
        .bgColor{
            position: absolute;
            left:0;
            top:0;
            width:40px;
            height: 40px;
            background-color: #93c47d;
        }
        .txt{
            position: absolute;
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            color: #000;
            text-align: center;
        }
        .slider{
            position: absolute;
            left:0;
            top:0;
            width: 50px;
            height: 38px;
            border: 1px solid #ccc;
            background: #fff;
            text-align: center;
            cursor: move;
        }
        .slider>i{
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
        }
        .slider.active>i{
            color:green;
        }
    </style>
</head>
<body>
<div style="width:380px;padding:30px;margin:0 auto;margin-top:19%;background:rgba(255,255,255,0.5)">
    <form class="layui-form" id="login-form">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div id="box" onselectstart="return false;">
                <div class="bgColor"></div>
                <div class="txt" >拖动滑块验证</div>
                <div class="slider"><i class="layui-icon layui-icon-next" style="font-size: 14px; color: #999;"></i></div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal"  type="button" id="btn-submit">登录</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script src="/themes/admin/lib/layui/layui.js"></script>
<script>
    layui.use("layer");

    function getEle(selector){
        return document.querySelector(selector);
    }
    var box = getEle("#box"),//容器
        bgColor = getEle(".bgColor"),//背景色
        txt = getEle(".txt"),//文本
        slider = getEle(".slider"),//滑块
        icon = getEle(".slider>i"),
        successMoveDistance = box.offsetWidth- slider.offsetWidth,//解锁需要滑动的距离
        downX,//用于存放鼠标按下时的位置
        isSuccess = false;//是否解锁成功的标志，默认不成功

    slider.onmousedown = mousedownHandler;

    function mousedownHandler(e){
        bgColor.style.transition = "";
        slider.style.transition = "";
        var e = e || window.event || e.which;
        downX = e.clientX;
        document.onmousemove = mousemoveHandler;
        document.onmouseup = mouseupHandler;
    };

    function getOffsetX(offset,min,max){
        if(offset < min){
            offset = min;
        }else if(offset > max){
            offset = max;
        }
        return offset;
    }

    function mousemoveHandler(e){
        var e = e || window.event || e.which;
        var moveX = e.clientX;
        var offsetX = getOffsetX(moveX - downX,0,successMoveDistance);
        bgColor.style.width = offsetX + "px";
        slider.style.left = offsetX + "px";

        if(offsetX == successMoveDistance){
            success();
        }
        e.preventDefault();
    };

    function mouseupHandler(e){
        if(!isSuccess){
            bgColor.style.width = 0 + "px";
            slider.style.left = 0 + "px";
            bgColor.style.transition = "width 0.8s linear";
            slider.style.transition = "left 0.8s linear";
        }
        document.onmousemove = null;
        document.onmouseup = null;
    };

    function success(){
        isSuccess = true;
        txt.innerHTML = "验证成功";
        bgColor.style.backgroundColor ="#93c47d";
        slider.className = "slider active";
        icon.className = "iconfont icon-xuanzhong";
        slider.onmousedown = null;
        document.onmousemove = null;
    };
    //滑块结束

    $("#btn-submit").click(function () {
        if(isSuccess){
            var data = $("#login-form").serialize();
            $.ajax({
                type:"POST",
                data:data,
                url:"/admin/user/login",
                success:function (e) {
                    if (e.code == 1){
                        layer.msg(e.msg,{icon:1});
                        setTimeout(function () {
                            location.href = "/admin";
                        },2000)
                    }else {
                        layer.msg(e.msg,{icon:2});
                    }
                }
            })
        }else{
            layer.msg("请滑动验证");
        }
    })
</script>
</body>
</html>